<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
            <div class="title">
              <span class="title-text">
              <img v-if="logo2" :src="logo2" class="sidebar-logo" >
                广西新福兴精益生产数据中心</span>
              <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
            </div>
            <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
          <div v-if="logo1" style="display: block;position: absolute;margin-right: 0">
          </div>
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-left"></span>
              <!--  用小时报接口 上一个小时 -->
              <!--     当日总引出量         -->
              <span class="text" style="margin-left: -20px">每小时引出量：{{ currentData.pullingOutput }} T</span>
<!--              <span class="text">厚度：2 mm</span>-->
            </div>
            <div class="react-left ml-3">
              <!--     当日良品总面积       -->
              <span class="text">每小时良品面积：{{ currentData.yieldSquare }}‬ m2</span>
            </div>
            <div class="react-left ml-3">
              <!--     上一个小时五线板厚      -->
              <span class="text">板厚：{{ currentData.thick }}</span>
<!--              <span class="text">平均原板宽：3575 mm</span>-->
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <!--     上一个小时五线平均良率     + '%'     -->
              <span class="text fw-b">上一小时总良品率：{{ currentData.yieldRate }} %</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                <div v-if="logo1" class="sidebar-logo2">
                  <img :src="logo1" class="sidebar-logo" >
                  <span>承建单位: 蚌埠凯盛工程技术有限公司</span>
                </div>
                {{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <dv-border-box-12>
                <!-- 7日良率堆积 用日报接口 查过去5日-->
                <yieldBarChart />
              </dv-border-box-12>
            </div>
            <div>
              <dv-border-box-8>
                <!-- 小时报表格 用小时报接口 查过去5小时 -->
                <hourReport />
              </dv-border-box-8>
            </div>
            <div>
              <dv-border-box-12>
                <!-- 1到5线班报 用班报接口查2班 -->
                <dayNightBarChart />
              </dv-border-box-12>
            </div>
          </div>

          <!-- 第五行数据 -->
          <div class="bottom-box">
            <div>
              <dv-border-box-13>
                <!-- 优化报表 用优化接口查2班 -->
                <qualifyReport />
              </dv-border-box-13>
            </div>
            <div>
              <!-- 缺陷 eCHARTS 用缺陷接口  -->
              <opPinChart />
            </div>
            <div>
              <dv-border-box-13>
                <!-- 查单小时不良数分类统计 用日报接口 查昨日 测试轮播 -->
                <opClassReport />
              </dv-border-box-13>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from '../utils/drawMixin'
import { formatTime } from '../utils/index.js'
import hourReport from './hourReport'
import opPinChart from './mainCenter'
import dayNightBarChart from './centerLeft'
import yieldBarChart from './mainRight'
import qualifyReport from './qualifyReport'
import opClassReport from './centerLeft1'
import bbksLogoImg from '@/assets/bbks-logo.png'
import xfxLogoImg from '@/assets/xfx-logo2.png'
import { refreshToken } from '@/api/login'

// import { currentData } from '@/api/current'
import { linesHoursStatic } from '@/api/yield'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)

export default {
  components: {
    dayNightBarChart,
    opClassReport,
    yieldBarChart,
    opPinChart,
    hourReport,
    qualifyReport
  },
  mixins: [drawMixin],
  data() {
    return {
      timing0: null,
      timing: null,
      timing2: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      currentData: {
        // 当日总引出量
        pullingOutput: null,
        // 当日良品总面积
        yieldSquare: null,
        // 上一个小时五线板厚 ||
        thick: null,
        // 上一个小时五线平均良率
        yieldRate: null
      },
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000'],
      logo1: bbksLogoImg,
      logo2: xfxLogoImg
    }
  },
  computed: {
    testEnv: {
      get() {
        return this.$store.state.settings.testEnv
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'testEnv',
          value: val
        })
      }
    }
  },
  mounted() {
    this.timeFn0()
    this.timeFn()
    this.timeFn2() // todo base
    this.cancelLoading() // todo test
    this.getCurrentData() // todo base
  },
  beforeDestroy() {
    clearInterval(this.timing0)
    clearInterval(this.timing)
    clearInterval(this.timing2)
  },
  methods: {
    refreshToken() {
      refreshToken().then(res => {
        console.log(res)
      })
    },
    getCurrentData() {
      // 计算前一小时时间
      const queryStaticsParams = {}
      let line24Statics = []
      const currentTime = new Date()
      const yieldSort = 'DESC'
      line24Statics = ['20250520150000', '20250520155959'] // 测试时间
      line24Statics[0] = dayjs(currentTime).subtract(1, 'hour').format('YYYYMMDDHH0000') // 实际时间
      line24Statics[1] = dayjs(currentTime).subtract(1, 'hour').format('YYYYMMDDHH5959') // 实际时间
      // line24Statics = ['20250520150000', '20250520155959'] // 测试时间 todo 生产端需注释 ！！！
      // line24Statics[1] = dayjs(currentTime).format('YYYYMMDDHH0000') // 实际时间
      linesHoursStatic(this.addParam((this.addDateRange(queryStaticsParams, [line24Statics[0], line24Statics[1]])), 'sort', yieldSort)).then(response => {
        if (response.data) {
          this.currentData = this.formatData(response.data)
        } else {
          console.log('linesHoursStatic Data undifiend!!! ', response)
        }
        this.loading = false
      })
    },
    formatData(dataArr) {
      let pullingSquare = 0
      let yieldSquare = 0
      let pullingOutput = 0
      let yieldRate = 0
      let thickStr = ''
      let count = 0
      return dataArr.reduce(function(acc, cur) {
        // 总引出量
        pullingOutput += cur.pullingOutput
        // 总引出面积
        pullingSquare += cur.pullingSquare
        // 良品总面积
        yieldSquare += cur.yieldSquare
        // 板厚
        thickStr = thickStr + cur.thick.toFixed(1) + ' '
        // 计数
        count += 1
        if (count === dataArr.length) {
          console.log('count:' + count)
          // 计算
          yieldRate = Number(((yieldSquare / pullingSquare) * 100).toFixed(2))
          acc = {
            // 当日总引出量
            pullingOutput: Number(pullingOutput.toFixed(0)),
            // 当日良品总面积
            yieldSquare: Number(yieldSquare.toFixed(0)),
            // 上一个小时五线板厚 ||
            thick: thickStr,
            // 上一个小时五线平均良率
            yieldRate: yieldRate
          }
        }
        return acc
      }, {})
      // dataArr
      // return {
      //   // 当日总引出量
      //   pullingSquare: dataArr.pullingSquare,
      //   // 当日良品总面积
      //   yieldSquare: dataArr.yieldSquare,
      //   // 上一个小时五线板厚 ||
      //   thick: dataArr.thick,
      //   // 上一个小时五线平均良率
      //   // cur.yieldSquare / cur.pullingSquare
      //   yieldRate: dataArr.yieldRate
      // }
    },
    timeFn0() {
      this.timing0 = setInterval(() => {
        console.log('8小时刷新token')
        this.refreshToken()
      }, 8 * 60 * 60 * 1000)
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    timeFn2() {
      this.timing2 = setInterval(() => {
        console.log('t2 up 实时')
        this.getCurrentData()
      }, 120000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
.sidebar-logo {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 12px;
}
.sidebar-logo2 {
  margin-top: -100px;
}
</style>
